<template>
  <div>
    <div class="w-100 p-3 border-bottom">简历修改</div>
    <div>
      <div class="hb_changewd w-50 m-auto mt-5 text-center">
        <!-- 真实姓名 -->
        <div class="demo-input-suffix d-flex mt-3">
          <div class="h5 w-50 text-end">真实姓名：</div>

          <el-input placeholder="请输入您的真实姓名" v-model="input1">
          </el-input>
        </div>
        <!-- 身份证号-->
        <div class="demo-input-suffix d-flex mt-3">
          <div class="h5 w-50 text-end">身份证号：</div>

          <el-input placeholder="请输入您的身份证号" v-model="input2">
          </el-input>
        </div>

        <!-- 手机号 -->
        <div class="demo-input-suffix d-flex mt-3">
          <div class="h5 w-50 text-end">手机号码：</div>

          <el-input placeholder="请输入您的手机号码" v-model="input3">
          </el-input>
        </div>
        <!-- 性别 -->
        <div class="d-flex mt-3">
          <div class="h5 hb_zdy_oldpwd text-end pe-3">性别:</div>
          <div>
            <el-radio-group v-model="radio">
              <el-radio :label="3" @dbclick.native="changeSex(1)">男</el-radio>
              <el-radio :label="6" @dbclick.native="changeSex(2)">女</el-radio>
            </el-radio-group>
          </div>
        </div>
        <!-- 出生日期 -->
        <div class="w-75 d-flex my-3">
          <div class="h5 w-50 text-end">出生日期：</div>

          <el-date-picker
            v-model="value1"
            type="date"
            placeholder="选择日期"
            value-format="timestamp"
          >
          </el-date-picker>
        </div>
        <!-- 选择现在的身份 下拉框-->
        <div class="demo-input-suffix d-flex">
          <div class="h5 hb_zdy_oldpwd w-50 text-end">您现在的身份：</div>

          <el-select v-model="value" placeholder="请选择">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
              >{{ item.label }}
            </el-option>
          </el-select>
        </div>

        <!-- 目前学历  下拉框-->
        <div class="demo-input-suffix d-flex my-3">
          <div class="h5 hb_zdy_oldpwd w-50 text-end">目前学历：</div>

          <el-select v-model="values" placeholder="请选择">
            <el-option
              v-for="item in schools"
              :key="item.values"
              :label="item.label1"
              :value="item.values"
              >{{ item.label1 }}
            </el-option>
          </el-select>
        </div>
        <!-- 专业 -->
        <div class="demo-input-suffix d-flex mt-3">
          <div class="h5 w-50 text-end">专业：</div>

          <el-input placeholder="请输入您的专业" v-model="input5"> </el-input>
        </div>
        <!-- 教学年限 -->
        <div class="demo-input-suffix d-flex mt-3">
          <div class="h5 w-50 text-end">教学年限：</div>

          <el-input v-model="input6"> </el-input>
        </div>
        <!-- 自我介绍 -->
        <div class="demo-input-suffix d-flex mt-3">
          <div class="h5 w-50 text-end">自我介绍：</div>
          <el-input
            type="textarea"
            :rows="4"
            placeholder="请输入内容"
            v-model="textarea"
          >
          </el-input>
        </div>
        <!-- 上传视频 -->
        <div class="demo-input-suffix d-flex mt-3">
          <div class="h5 hb_zdy_oldpwd w-50 text-end pe-3">上传视频:</div>
          <div>
            <el-upload
              action="https://jsonplaceholder.typicode.com/posts/"
              list-type="picture-card"
              :on-preview="handlePictureCardPreview"
              :on-remove="handleRemove"
            >
              <i class="el-icon-plus"></i>
            </el-upload>
            <el-dialog :visible.sync="dialogVisible">
              <img width="100%" :src="dialogImageUrl" alt="" />
            </el-dialog>
          </div>
        </div>
        <!-- 上传照片 -->
        <div class="demo-input-suffix d-flex mt-3">
          <div class="h5 hb_zdy_oldpwd w-50 text-end pe-3">上传照片:</div>
          <div>
            <el-upload
              action="https://jsonplaceholder.typicode.com/posts/"
              list-type="picture-card"
              :on-preview="handlePictureCardPreview"
              :on-remove="handleRemove"
            >
              <i class="el-icon-plus"></i>
            </el-upload>
            <el-dialog :visible.sync="dialogVisible">
              <img width="100%" :src="dialogImageUrl" alt="" />
            </el-dialog>
          </div>
        </div>

        <!-- 是否免费试听 -->
        <div class="d-flex mt-3">
          <div class="h5 hb_zdy_oldpwd text-end pe-3">是否免费试听:</div>
          <div>
            <el-radio-group v-model="radio1">
              <el-radio :label="3" @dbclick.native="changeSex(4)"
                >免费试听</el-radio
              >
              <el-radio :label="6" @dbclick.native="changeSex(5)"
                >不试听</el-radio
              >
            </el-radio-group>
          </div>
        </div>

        <span
          class="
            d-block
            bg-info
            w-25
            m-auto
            mt-4
            fs-4
            text-center
            rounded-3
            text-white
          "
          >确定</span
        >
        <div>{{ value1 }}</div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      textarea: "",
      value: "",
      values: "",
      value1: "",
      pushPwd: "",
      value2: "",
      schools: [
        { values: "1", label1: "本科" },
        { values: "2", label1: "研究生" },
        { values: "3", label1: "博士" },
        { values: "4", label1: "博士后" },
        { values: "5", label1: "其他" },
      ],
      input1: "",
      input2: "",
      input3: "",
      input4: "",
      input5: "",
      input6: "",
      options: [
        { value: "1", label: "在线老师" },
        { value: "2", label: "线下老师" },
      ],
      radio: "",
      radio1: "",
      dialogImageUrl: "",
      dialogVisible: false,
      fileList: [
        {
          name: "food.jpeg",
          url: "https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100",
        },
        {
          name: "food2.jpeg",
          url: "https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100",
        },
      ],
    };
  },
  methods: {
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    changeSex(e) {
      if (e == this.radio) {
        this.radio = "";
      } else {
        this.radio = e;
      }
      // e == this.radio ? (this.radio = "") : (this.radio = e);
    },
  },
};
</script>

<style lang="scss">
.el-input__inner {
  width: 300px;
}
.hb_zdy_oldpwd {
  width: 176px !important;
}
.el-input {
  text-align: left !important;
}
</style>